<template>
    <div>
        <div class="bigImage">
            <div class="big_icon_wrapper">
                <SvgIcon icon="icon-left1" class="big_icon" @click.native="click_left"></SvgIcon>
            </div>
            <div class="mainImage"
                 :href="previewsImages[currentShowIndex].url"
                 data-lightbox="roadtrip"
                 v-if="previewsImages[currentShowIndex]"
            >
                <img :src="previewsImages[currentShowIndex].url" alt="">
            </div>
            <div class="big_icon_wrapper">
                <SvgIcon icon="icon-right1" class="big_icon" @click.native="click_right"></SvgIcon>
            </div>
        </div>
        <div class="swiper-container  pswp__container" ref="swiper_container1">
            <div class="swiper-wrapper" id="pswp">
                <div
                        class="swiper-slide swiper-slide1 pswp__item"
                        data-lightbox="roadtrip"
                        :data-caption="key" :data-id="key"
                        v-for="(item,key) in previewsImages"
                        v-if="item"
                        @click="click_swipper_item"
                        :key="key"
                        :data-active="key==currentShowIndex"
                        :data-index="key"
                        :href="item.url">
                    <img :src="item.url" alt="" :data-index="key"/>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
    import {getLocal, setLocal} from "../../../utils/local";
    import {get_design, getProductImage} from "../service";
    import SvgIcon from '../../../components/svgIcon'
    import ImagesModal from '../imagesModal.js'
    import {isPc} from "../../../utils";

    export default {
        components: {
            SvgIcon
        },
        data() {
            return {
                design: {},
                previewsImages: [],
                currentShowIndex: 0,
                productImage_popupVisible: false
            }
        },
        methods: {
            click_swipper_item(e) {
                this.currentShowIndex = e.target.dataset.index
            },
            click_left() {
                var currentShowIndex = parseInt(this.$data.currentShowIndex)
                if (currentShowIndex <= 0) {
                    return false
                }
                this.$data.currentShowIndex = currentShowIndex - 1
            },
            click_right() {
                var currentShowIndex = parseInt(this.$data.currentShowIndex)
                if (currentShowIndex <= this.$data.previewsImages.length - 1) {
                    this.$data.currentShowIndex = currentShowIndex + 1
                }

            },
        },
        mounted() {
            var self = this
            var designId = this.$route.params.id
            getProductImage(designId).then(previewImages => {
                self.design = previewImages.design
                self.previewsImages = previewImages.files;
                setLocal(`product.previewImages.${designId}`, self.previewsImages)
                self.$nextTick(() => {
                    var swiper = new window.Swiper(".pswp__container", {
                        slidesPerView: 'auto',
                    });
                })
            })

        }
    }
</script>
<style lang="less" scoped>
    .bigImage {
        display: flex;
        background: #ddd;
        .mainImage {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            img {
                max-width: 100%;
                max-height: 100%;
            }
        }

        .big_icon_wrapper {
            padding: 5px;
            display: flex;
            align-items: center;
            .big_icon {
                font-size: 30px;
                color: #929292;
            }
        }

    }

    .swiper-container {
        width: 100%;
        height: 100px;
        z-index: 99;
        .swiper-slide1 {
            width: 100px;
            height: 63.8px;

            img {
                max-height: 100%;
                max-width: 100%;
            }
        }

        .pswp__item {
            position: relative;
            &:after {
                content: "";
                width: 100%;
                height: 100%;
                background: #222;
                opacity: .8;
                z-index: 99;
                position: absolute;
                left: 0;
                top: 0;
            }

        }
        .pswp__item[data-active] {
            &:after {
                opacity: 0;
            }
        }
    }
</style>